<script setup>
import { ref, onMounted, reactive, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import _ from "lodash";

import qw from "@/assets/images/environment/qw.png";
import sd from "@/assets/images/environment/sd.png";
import fs from "@/assets/images/environment/fs.png";
import ph from "@/assets/images/environment/ph.png";

//空气质量
let aqiChartRef = ref();
let ycChartRef = ref();
let realChartRef = ref();
let pmChartRef = ref();
let eleChartRef = ref();
let waterChartRef = ref();

let myAqiChart = null;
let myYcChart = null;
let myRealChart = null;
let myPmChart = null;
let myEleChart = null;
let myWaterChart = null;

const aqiData = reactive({
  aqiChart: [
    { name: "优秀", value: 0 },
    { name: "良好", value: 15 },
    { name: "轻度", value: 0 },
    { name: "中度", value: 0 },
    { name: "重度", value: 0 },
    { name: "严重", value: 0 },
  ],
  noiseChart: [
    { name: "达标", value: 15 },
    { name: "不达标", value: 0 },
  ],
});

const ycData = reactive({
  ycChart: [
    { name: "优秀", value: 70 },
    { name: "良好", value: 164 },
    { name: "轻度", value: 17 },
    { name: "中度", value: 6 },
    { name: "重度", value: 11 },
    { name: "严重", value: 11 },
  ],
  noiseChart: [
    { name: "达标", value: 256 },
    { name: "不达标", value: 25 },
  ],
});

const eleData = reactive({
  eleChart: [
 
    {
      date: "2023-06",
      office: 0.69,
      work: 14.41,
      live: 2.25,
    },
    {
      date: "2023-07",
      office: 0.57,
      work: 8.66,
      live: 1.14,
    },
    {
      date: "2023-08",
      office: 0.78,
      work: 9.72,
      live: 1.50,
    },
    {
      date: "2023-09",
      office: 0.16,
      work: 2.95,
      live: 0.55,
    },
    {
      date: "2023-10",
      office: 0.13,
      work: 7.37,
      live: 1.48,
    },
    {
      date: "2023-11",
      office: 0.75,
      work: 12.76,
      live: 1.5,
    },
    {
      date: "2023-12",
      office: 0.62,
      work: 10.26,
      live: 1.7,
    },
    {
      date: "2024-01",
      office: 0.37,
      work: 6.06,
      live: 1.13,
    },
    {
      date: "2024-02",
      office: 0.44,
      work: 7.36,
      live: 1.01,
    },
    {
      date: "2024-03",
      office: 0.47,
      work: 8.63,
      live: 1.48,
    },
    {
      date: "2024-04",
      office: 0.38,
      work: 7.95,
      live: 1.24,
    },
  ],
});

const waterData = reactive({
  waterChart: [
    {
      date: "2023-04",
      office: 108.05,
      work: 1728.8,
      live: 324.15,
    },
    {
      date: "2023-05",
      office: 57.8,
      work: 1199.35,
      live: 187.85,
    },
    {
      date: "2023-06",
      office: 90.86,
      work: 1379.42,
      live: 181.72,
    },
    {
      date: "2023-07",
      office: 96.33,
      work: 1200.42,
      live: 185.25,
    },
    {
      date: "2023-08",
      office: 61.38,
      work: 1098.02,
      live: 204.6,
    },
    {
      date: "2023-09",
      office: 12.32,
      work: 673.22,
      live: 135.47,
    },
    {
      date: "2023-10",
      office: 27.95,
      work: 475.15,
      live: 55.9,
    },
    {
      date: "2023-11",
      office: 83.55,
      work: 1361.87,
      live: 225.59,
    },
    {
      date: "2023-12",
      office: 195.2,
      work: 3123.2,
      live: 585.6,
    },
    {
      date: "2024-01",
      office: 173.55,
      work: 2898.29,
      live: 399.17,
    },
    {
      date: "2024-02",
      office: 139.64,
      work: 2528.95,
      live: 434.12,
    },
    {
      date: "2024-03",
      office: 198.0,
      work: 4108.5,
      live: 643.5,
    },
    {
      date: "2024-04",
      office: 78.53,
      work: 4292.7,
      live: 863.78,
    },
  ],
});

const pmData = reactive({
  pm25Data: [85, 92, 73, 94, 87, 95],
  pm10Data: [65, 102, 71, 86, 99, 79],
});

const realData = reactive({
  realChart: [
    { name: "PM2.5", value: 21 },
    { name: "PM10", value: 28 },
    { name: "噪音", value: 60 },
    { name: "AQI", value: 20, rate: "优秀" },
  ],
  infoPanel: [
    { name: "气温", value: "31℃", color: "#6CA1FE", src: qw },
    { name: "湿度", value: "95%", color: "#38CB87", src: sd },
    { name: "风速", value: "0.7m/s", color: "#F4C118", src: fs },
    { name: "污水池PH值", value: "11", color: "#F1825E", src: ph },
  ],
});

const pieCharColorList = [
  { c1: "#45BEB0", c2: "#57E3D3" },
  { c1: "#FFD646", c2: "#FFC12C" },
  { c1: "#F28662", c2: "#F8BFB1" },
  { c1: "#FE0812", c2: "#D60D16" },
  { c1: "#8674FE", c2: "#B7ACFF" },
  { c1: "#911C3A", c2: "#6F142C" },
];

const pieChartColorList2 = [
  { c1: "#508EFF", c2: "#82AEFE" },
  { c1: "#F28662", c2: "#F8BFB1" },
];

const lineChartColorList = [
  { c1: "#7AE6CE", c2: "#30C77E" },
  { c1: "#83BDFF", c2: "#6597FE" },
  { c1: "#F8C747", c2: "#F6AA17" },
];

const realChartColorList = [
  { c1: "#508EFF", c2: "#82AEFE", c3: "#F1F1F1" },
  { c1: "#45BEB0", c2: "#57E3D3", c3: "#F1F1F1" },
  { c1: "#F2D85C", c2: "#FCB407", c3: "#F1F1F1" },
  { c1: "#45BEB0", c2: "#57E3D3", c3: "#F1F1F1" },
];

onMounted(() => {
  initAqiChart();
  initYcChart();
  initEleChart();
  initWaterChart();
  initPmChart();
  initRealChart();
  window.onresize = _.debounce(() => {
    myAqiChart.resize();
    myYcChart.resize();
    myPmChart.resize();
    myRealChart.resize();
    myEleChart.resize();
    myWaterChart.resize();
  }, 300);
});

// 卸载页面销毁 window.onresize事件
onBeforeUnmount(() => {
  window.onresize = null;
});

const initAqiChart = () => {
  let total = 0;
  for (let i = 0; i < aqiData.aqiChart.length; i++) {
    total += aqiData.aqiChart[i].value;
  }
  let aqiChartDom = document.getElementById("aqiChart");
  echarts.dispose(aqiChartDom);
  myAqiChart = echarts.init(aqiChartRef.value);
  myAqiChart.clear();
  let option;
  option = {
    title: {
      show: true,
      text: "AQI",
      left: "35%",
      top: "32%",
      zlevel: 9,
      textStyle: {
        fontSize: 20,
        align: "center",
        fontWeight: 700,
        fontFamily: "微软雅黑",
        color: "#236E8A",
        lineHeight: 30,
      },
    },
    tooltip: {
      trigger: "item",
    },
    legend: [
      {
        orient: "vertical",
        itemWidth: 20, // 标志图形的长度
        itemHeight: 10, // 标志图形的宽度
        itemGap: 20,
        right: 25,
        top: 55,
        data: ["优秀", "良好", "轻度", "中度", "重度", "严重"],
        formatter: function (name) {
          let tarValue;
          for (let s = 0; s < aqiData.aqiChart.length; s++) {
            if (aqiData.aqiChart[s].name == name) {
              tarValue = aqiData.aqiChart[s].value;
            }
          }
          let v = tarValue;
          return `${name}:  ${v}天`;
          //var p = Math.round(((tarValue / total) * 100));
          //return `${name}  ${v}人(${p}%)`;
        },
      },
      {
        orient: "vertical",
        itemWidth: 20, // 标志图形的长度
        itemHeight: 10, // 标志图形的宽度
        itemGap: 20,
        right: 115,
        bottom: 40,
        data: ["达标", "不达标"],
        formatter: function (name) {
          let tarValue;
          for (let s = 0; s < aqiData.noiseChart.length; s++) {
            if (aqiData.noiseChart[s].name == name) {
              tarValue = aqiData.noiseChart[s].value;
            }
          }
          let v = tarValue;
          return `${name}:  ${v}天`;
          //var p = Math.round(((tarValue / total) * 100));
          //return `${name}  ${v}人(${p}%)`;
        },
      },
    ],
    series: [
      {
        name: "空气质量",
        type: "pie",
        radius: ["25%", "45%"],
        center: ["40%", "37%"],
        avoidLabelOverlap: false,
        itemStyle: {
          color: function (params) {
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                offset: 0,
                color: pieCharColorList[params.dataIndex].c1,
              },
              {
                offset: 1,
                color: pieCharColorList[params.dataIndex].c2,
              },
            ]);
          },
        },
        label: {
          show: true,
          position: "outside",
          color: "#000",
          formatter: function (params) {
            var percent = 0;
            percent = ((params.value / total) * 100).toFixed(0);
            if (params.name !== "") {
              return percent + "%";
              // return params.value + "人" + "\n" + percent + "%";
              // return (
              //     params.name + '\n' +
              //     percent +
              //     "%"
              // );
            } else {
              return "";
            }
          },
        },
        labelLine: {
          length: 15,
          length2: 25,
          show: true,
          color: "#000",
        },
        data: aqiData.aqiChart,
      },
      {
        name: "噪声",
        type: "pie",
        radius: ["17%", "25%"],
        center: ["40%", "82%"],
        avoidLabelOverlap: false,
        itemStyle: {
          color: function (params1) {
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                offset: 0,
                color: pieChartColorList2[params1.dataIndex].c1,
              },
              {
                offset: 1,
                color: pieChartColorList2[params1.dataIndex].c2,
              },
            ]);
          },
        },
        label: {
          show: true,
          // position: "outside",
          position: "center",
          color: "#000",
          formatter: "{innerTitle|噪音}",
          rich: {
            innerTitle: {
              fontSize: 20,
              fontWeight: 700,
              fontFamily: "微软雅黑",
              color: "#236E8A",
              lineHeight: 30,
            },
          },
          // formatter: function (params) {
          //     var percent = 0;
          //     percent = ((params.value / total) * 100).toFixed(0);
          //     if (params.name !== "") {
          //         return percent + '%';
          //         // return params.value + "人" + "\n" + percent + "%";
          //         // return (
          //         //     params.name + '\n' +
          //         //     percent +
          //         //     "%"
          //         // );
          //     } else {
          //         return "";
          //     }
          // },
        },
        labelLine: {
          length: 15,
          length2: 25,
          show: true,
          color: "#000",
        },
        data: aqiData.noiseChart,
      },
    ],
  };
  option && myAqiChart.setOption(option);
};

const initYcChart = () => {
  let total = 0;
  for (let i = 0; i < ycData.ycChart.length; i++) {
    total += ycData.ycChart[i].value;
  }
  let ycChartDom = document.getElementById("ycChart");
  echarts.dispose(ycChartDom);
  myYcChart = echarts.init(ycChartRef.value);
  myYcChart.clear();
  let option;
  option = {
    title: {
      show: true,
      text: "扬尘",
      left: "35%",
      top: "28%",
      zlevel: 9,
      textStyle: {
        fontSize: 20,
        align: "center",
        fontWeight: 700,
        fontFamily: "微软雅黑",
        color: "#236E8A",
        lineHeight: 30,
      },
    },
    tooltip: {
      trigger: "item",
    },
    legend: [
      {
        orient: "vertical",
        itemWidth: 20, // 标志图形的长度
        itemHeight: 10, // 标志图形的宽度
        itemGap: 20,
        right: 25,
        top: 45,
        data: ["优秀", "良好", "轻度", "中度", "重度", "严重"],
        formatter: function (name) {
          let tarValue;
          for (let s = 0; s < ycData.ycChart.length; s++) {
            if (ycData.ycChart[s].name == name) {
              tarValue = ycData.ycChart[s].value;
            }
          }
          let v = tarValue;
          return `${name}:  ${v}天`;
          //var p = Math.round(((tarValue / total) * 100));
          //return `${name}  ${v}人(${p}%)`;
        },
      },
      {
        orient: "vertical",
        itemWidth: 20, // 标志图形的长度
        itemHeight: 10, // 标志图形的宽度
        itemGap: 20,
        right: 115,
        bottom: 70,
        data: ["达标", "不达标"],
        formatter: function (name) {
          let tarValue;
          for (let s = 0; s < ycData.noiseChart.length; s++) {
            if (ycData.noiseChart[s].name == name) {
              tarValue = ycData.noiseChart[s].value;
            }
          }
          let v = tarValue;
          return `${name}:  ${v}天`;
          //var p = Math.round(((tarValue / total) * 100));
          //return `${name}  ${v}人(${p}%)`;
        },
      },
    ],
    series: [
      {
        name: "空气质量",
        type: "pie",
        radius: ["20%", "34%"],
        center: ["40%", "32%"],
        avoidLabelOverlap: false,
        itemStyle: {
          color: function (params) {
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                offset: 0,
                color: pieCharColorList[params.dataIndex].c1,
              },
              {
                offset: 1,
                color: pieCharColorList[params.dataIndex].c2,
              },
            ]);
          },
        },
        label: {
          show: true,
          position: "outside",
          color: "#000",
          formatter: function (params) {
            var percent = 0;
            percent = ((params.value / total) * 100).toFixed(0);
            if (params.name !== "") {
              return percent + "%";
              // return params.value + "人" + "\n" + percent + "%";
              // return (
              //     params.name + '\n' +
              //     percent +
              //     "%"
              // );
            } else {
              return "";
            }
          },
        },
        labelLine: {
          length: 15,
          length2: 25,
          show: true,
          color: "#000",
        },
        data: ycData.ycChart,
      },
      {
        name: "噪声",
        type: "pie",
        radius: ["15%", "23%"],
        center: ["40%", "77%"],
        avoidLabelOverlap: false,
        itemStyle: {
          color: function (params1) {
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                offset: 0,
                color: pieChartColorList2[params1.dataIndex].c1,
              },
              {
                offset: 1,
                color: pieChartColorList2[params1.dataIndex].c2,
              },
            ]);
          },
        },
        label: {
          show: true,
          //position: "outside",
          position: "center",
          color: "#000",
          formatter: "{innerTitle|噪音}",
          rich: {
            innerTitle: {
              fontSize: 20,
              fontWeight: 700,
              fontFamily: "微软雅黑",
              color: "#236E8A",
              lineHeight: 30,
            },
          },
          // formatter: function (params) {
          //     var percent = 0;
          //     percent = ((params.value / total) * 100).toFixed(0);
          //     if (params.name !== "") {
          //         return percent + '%';
          //         // return params.value + "人" + "\n" + percent + "%";
          //         // return (
          //         //     params.name + '\n' +
          //         //     percent +
          //         //     "%"
          //         // );
          //     } else {
          //         return "";
          //     }
          // },
        },
        labelLine: {
          length: 15,
          length2: 25,
          show: true,
          color: "#000",
        },
        data: ycData.noiseChart,
      },
    ],
  };
  option && myYcChart.setOption(option);
};

const initEleChart = () => {
  let total = 0;
  let officeTotal = 0;
  let workTotal = 0;
  let liveTotal = 0;
  for (let i = 0; i < eleData.eleChart.length; i++) {
    officeTotal += eleData.eleChart[i].office;
    workTotal += eleData.eleChart[i].work;
    liveTotal += eleData.eleChart[i].live;
  }
  total = (officeTotal + workTotal + liveTotal).toFixed(2);
  let pieData = [
    { name: "办公区", value: officeTotal },
    { name: "施工区", value: workTotal },
    { name: "生活区", value: liveTotal },
  ];

  //条形图
  let officeArr = [];
  let workArr = [];
  let liveArr = [];
  let dateArr = [];
  eleData.eleChart.forEach((item) => {
    officeArr.push(item.office);
    workArr.push(item.work);
    liveArr.push(item.live);
    dateArr.push(item.date);
  });
  let eleChartDom = document.getElementById("eleChart");
  echarts.dispose(eleChartDom);
  myEleChart = echarts.init(eleChartRef.value);
  myEleChart.clear();
  let option;
  option = {
    title: {
      show: true,
      text: "总用电量\nKW·H",
      subtext: total + "万", //副标题文本，'\n'指定换行
      left: "center",
      top: "15%",
      zlevel: 9,
      textStyle: {
        fontSize: 16,
        align: "center",
        fontWeight: 700,
        color: "#236E8A",
        lineHeight: 80,
        fontFamily: "SourceHanSansSC",
      },
      subtextStyle: {
        //副标题文本样式{"color": "#aaa"}
        fontSize: 27,
        align: "center",
        fontWeight: 600,
        fontFamily: "SourceHanSansSC",
        color: "#42CF91",
        lineHeight: -180,
      },
    },
    tooltip: {
      // trigger: "item",
    },
    grid: {
      x: 40,
      y: 280,
      x2: 20,
      y2: 25,
    },
    xAxis: {
      type: "category",
      data: dateArr,
      axisLabel: {
        color: "#000",
        fontFamily: "SourceHanSansSC",
      },
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLine: {
        show: true, //不显示坐标轴线
        lineStyle: {
          color: "#939393 ",
        },
      },
    },
    yAxis: {
      type: "value",
      name: "单位：万KW·H",
      nameLocation: "end",
      nameTextStyle: {
        // fontSize: 14,
        padding: [0, 0, 0, 20],
        fontFamily: "SourceHanSansSC",
      },
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLine: {
        show: true, //不显示坐标轴线
      },
      splitLine: {
        //网格线
        show: true,
      },
      axisLabel: {
        color: "#5D605F",
        fontFamily: "SourceHanSansSC",
      },
    },
    series: [
      {
        name: "用电量",
        type: "pie",
        radius: ["30%", "40%"],
        center: ["50%", "32%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 9,
          borderColor: "#fff",
          borderWidth: 0,
          color: function (params) {
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                offset: 0,
                color: lineChartColorList[params.dataIndex].c1,
              },
              {
                offset: 1,
                color: lineChartColorList[params.dataIndex].c2,
              },
            ]);
          },
        },
        label: {
          show: true,
          position: "outside",
          color: "#000",
          fontFamily: "SourceHanSansSC",
          formatter: function (params) {
            var percent = 0;
            percent = ((params.value / total) * 100).toFixed(0);
            if (params.name !== "") {
              // return percent + '%';
              // return params.value + "人" + "\n" + percent + "%";
              return params.name + "\n" + percent + "%";
            } else {
              return "";
            }
          },
        },
        labelLine: {
          length: 15,
          length2: 25,
          show: true,
          color: "#000",
        },
        data: pieData,
      },
      {
        name: "办公区",
        data: officeArr,
        type: "bar",
        barWidth: 10,
        //stack: 'environment',
        // barGap:'90%'
        itemStyle: {
          // 使用方法二的写法
          //color: '#10c492'
          color: {
            type: "linear",
            x: 0, //右
            y: 0, //下
            x2: 0, //左
            y2: 1, //上
            colorStops: [
              {
                offset: 0,
                color: "#7AE6CE", // 0% 处的颜色
              },
              // {
              //     offset: 0.7,
              //     color: '#2378f7' // 70% 处的颜色
              // },
              {
                offset: 1,
                color: "#30C77E", // 100% 处的颜色
              },
            ],
          },
          barBorderRadius: [5, 5, 0, 0],
        },
      },
      {
        name: "施工区",
        data: workArr,
        type: "bar",
        barWidth: 10,
        //stack: 'environment',
        // barGap:'90%'
        itemStyle: {
          // 使用方法二的写法
          //color: '#10c492'
          color: {
            type: "linear",
            x: 0, //右
            y: 0, //下
            x2: 0, //左
            y2: 1, //上
            colorStops: [
              {
                offset: 0,
                color: "#83BDFF", // 0% 处的颜色
              },
              // {
              //     offset: 0.7,
              //     color: '#2378f7' // 70% 处的颜色
              // },
              {
                offset: 1,
                color: "#6597FE", // 100% 处的颜色
              },
            ],
          },
          barBorderRadius: [5, 5, 0, 0],
        },
      },
      {
        name: "生活区",
        data: liveArr,
        type: "bar",
        barWidth: 10,
        //stack: 'environment',
        // barGap:'90%'
        itemStyle: {
          // 使用方法二的写法
          //color: '#10c492'
          color: {
            type: "linear",
            x: 0, //右
            y: 0, //下
            x2: 0, //左
            y2: 1, //上
            colorStops: [
              {
                offset: 0,
                color: "#F8C747", // 0% 处的颜色
              },
              // {
              //     offset: 0.7,
              //     color: '#2378f7' // 70% 处的颜色
              // },
              {
                offset: 1,
                color: "#F6AA17", // 100% 处的颜色
              },
            ],
          },
          barBorderRadius: [5, 5, 0, 0],
        },
      },
    ],
  };
  option && myEleChart.setOption(option);
};

const initWaterChart = () => {
  let total = 0;
  let officeTotal = 0;
  let workTotal = 0;
  let liveTotal = 0;
  for (let i = 0; i < waterData.waterChart.length; i++) {
    officeTotal += waterData.waterChart[i].office;
    workTotal += waterData.waterChart[i].work;
    liveTotal += waterData.waterChart[i].live;
  }
  total = (officeTotal + workTotal + liveTotal).toFixed(2);
  let pieData = [
    { name: "办公区", value: officeTotal },
    { name: "施工区", value: workTotal },
    { name: "生活区", value: liveTotal },
  ];

  //条形图
  let officeArr = [];
  let workArr = [];
  let liveArr = [];
  let dateArr = [];
  waterData.waterChart.forEach((item) => {
    officeArr.push(item.office);
    workArr.push(item.work);
    liveArr.push(item.live);
    dateArr.push(item.date);
  });
  let waterChartDom = document.getElementById("waterChart");
  echarts.dispose(waterChartDom);
  myWaterChart = echarts.init(waterChartRef.value);
  myWaterChart.clear();
  let option;
  option = {
    title: {
      show: true,
      text: "总用水量 \n m³",
      subtext: total, //副标题文本，'\n'指定换行
      left: "center",
      top: "16%",
      zlevel: 9,
      textStyle: {
        fontSize: 16,
        align: "center",
        fontWeight: 700,
        fontFamily: "SourceHanSansSC",
        color: "#236E8A",
        lineHeight: 80,
      },
      subtextStyle: {
        //副标题文本样式{"color": "#aaa"}
        fontSize: 27,
        align: "center",
        fontWeight: 600,
        fontFamily: "SourceHanSansSC",
        color: "#42CF91",
        lineHeight: -180,
      },
    },
    tooltip: {
      // trigger: "item",
    },
    grid: {
      x: 60,
      y: 290,
      x2: 20,
      y2: 25,
    },
    xAxis: {
      type: "category",
      data: dateArr,
      axisLabel: {
        color: "#000",
        fontFamily: "SourceHanSansSC",
      },
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLine: {
        show: true, //不显示坐标轴线
        lineStyle: {
          color: "#939393 ",
        },
      },
    },
    yAxis: {
      type: "value",
      name: "单位：m³",
      //nameRotate: '90',
      nameLocation: "end",
      nameTextStyle: {
        fontFamily: "SourceHanSansSC",
      },
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLine: {
        show: true, //不显示坐标轴线
      },
      splitLine: {
        //网格线
        show: true,
      },
      axisLabel: {
        color: "#5D605F",
        fontFamily: "SourceHanSansSC",
      },
    },
    series: [
      {
        name: "用水量",
        type: "pie",
        radius: ["30%", "40%"],
        center: ["50%", "32%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 9,
          borderColor: "#fff",
          borderWidth: 0,
          color: function (params) {
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                offset: 0,
                color: lineChartColorList[params.dataIndex].c1,
              },
              {
                offset: 1,
                color: lineChartColorList[params.dataIndex].c2,
              },
            ]);
          },
        },
        label: {
          show: true,
          position: "outside",
          color: "#000",
          fontFamily: "SourceHanSansSC",
          formatter: function (params) {
            var percent = 0;
            percent = ((params.value / total) * 100).toFixed(0);
            if (params.name !== "") {
              // return percent + '%';
              // return params.value + "人" + "\n" + percent + "%";
              return params.name + "\n" + percent + "%";
            } else {
              return "";
            }
          },
        },
        labelLine: {
          length: 15,
          length2: 25,
          show: true,
          color: "#000",
        },
        data: pieData,
      },
      {
        name: "办公区",
        data: officeArr,
        type: "bar",
        barWidth: 10,
        //stack: 'environment',
        // barGap:'90%'
        itemStyle: {
          // 使用方法二的写法
          //color: '#10c492'
          color: {
            type: "linear",
            x: 0, //右
            y: 0, //下
            x2: 0, //左
            y2: 1, //上
            colorStops: [
              {
                offset: 0,
                color: "#7AE6CE", // 0% 处的颜色
              },
              // {
              //     offset: 0.7,
              //     color: '#2378f7' // 70% 处的颜色
              // },
              {
                offset: 1,
                color: "#30C77E", // 100% 处的颜色
              },
            ],
          },
          barBorderRadius: [5, 5, 0, 0],
        },
      },
      {
        name: "施工区",
        data: workArr,
        type: "bar",
        barWidth: 10,
        //stack: 'environment',
        // barGap:'90%'
        itemStyle: {
          // 使用方法二的写法
          //color: '#10c492'
          color: {
            type: "linear",
            x: 0, //右
            y: 0, //下
            x2: 0, //左
            y2: 1, //上
            colorStops: [
              {
                offset: 0,
                color: "#83BDFF", // 0% 处的颜色
              },
              // {
              //     offset: 0.7,
              //     color: '#2378f7' // 70% 处的颜色
              // },
              {
                offset: 1,
                color: "#6597FE", // 100% 处的颜色
              },
            ],
          },
          barBorderRadius: [5, 5, 0, 0],
        },
      },
      {
        name: "生活区",
        data: liveArr,
        type: "bar",
        barWidth: 10,
        //stack: 'environment',
        // barGap:'90%'
        itemStyle: {
          // 使用方法二的写法
          //color: '#10c492'
          color: {
            type: "linear",
            x: 0, //右
            y: 0, //下
            x2: 0, //左
            y2: 1, //上
            colorStops: [
              {
                offset: 0,
                color: "#F8C747", // 0% 处的颜色
              },
              // {
              //     offset: 0.7,
              //     color: '#2378f7' // 70% 处的颜色
              // },
              {
                offset: 1,
                color: "#F6AA17", // 100% 处的颜色
              },
            ],
          },
          barBorderRadius: [5, 5, 0, 0],
        },
      },
    ],
  };
  option && myWaterChart.setOption(option);
};

const initPmChart = () => {
  let dateArr = [
    "2023-11",
    "2023-12",
    "2024-01",
    "2024-02",
    "2024-03",
    "2024-04",
  ];
  let pmChartDom = document.getElementById("pmChart");
  echarts.dispose(pmChartDom);
  myPmChart = echarts.init(pmChartRef.value);
  myPmChart.clear();
  let option;
  option = {
    grid: {
      x: 40,
      y: 70,
      x2: 20,
      y2: 55,
    },
    legend: {
      top: "13%",
      right: "10%",
    },
    tooltip: {
      trigger: "axis",
      // formatter(params) {
      //     // 返回值就是html代码可以使用标签
      //     return `
      //         时刻：${params.data.title} </br>
      //         分数：${params.data.value}
      //     `;
      // },
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    xAxis: {
      type: "category",
      data: dateArr,
      axisLabel: {
        interval: 0,
        // rotate: 45,
        color: "#000",
        fontFamily: "SourceHanSansSC",
      },
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLine: {
        show: true, //不显示坐标轴线
        lineStyle: {
          color: "#939393 ",
        },
      },
    },
    yAxis: {
      type: "value",
      name: "单位:PG/m³",
      nameLocation: "end",
      nameTextStyle: {
        padding: [0, 0, 0, -10],
        fontFamily: "SourceHanSansSC",
      },
      axisTick: {
        show: false, //不显示坐标轴刻度线
      },
      axisLine: {
        show: true, //不显示坐标轴线
      },
      splitLine: {
        //网格线
        show: true,
      },
      axisLabel: {
        color: "#5D605F",
        fontFamily: "SourceHanSansSC",
      },
    },
    series: [
      {
        name: "PM2.5",
        data: pmData.pm25Data,
        type: "line",
        barWidth: 25,
        stack: "Total",
        smooth: true,
        symbol: "none",
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(19,156,255,0.5)",
            },
            {
              offset: 1,
              color: "rgba(136,205,255,0.03)",
            },
          ]),
        },
        // barGap:'90%'
        itemStyle: {
          // 使用方法二的写法
          color: {
            type: "linear",
            x: 0, //右
            y: 0, //下
            x2: 0, //左
            y2: 1, //上
            colorStops: [
              {
                offset: 0,
                color: "#47B2FF", // 0% 处的颜色
              },
              // {
              //     offset: 0.7,
              //     color: '#2378f7' // 70% 处的颜色
              // },
              {
                offset: 1,
                color: "#0091E4", // 100% 处的颜色
              },
            ],
          },
        },
      },
      {
        name: "PM10",
        data: pmData.pm10Data,
        type: "line",
        barWidth: 25,
        stack: "Total",
        smooth: true,
        symbol: "none",
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(19,255,197,0.5)",
            },
            {
              offset: 1,
              color: "rgba(136,242,255,0.03)",
            },
          ]),
        },
        // barGap:'90%'
        itemStyle: {
          // 使用方法二的写法
          color: {
            type: "linear",
            x: 0, //右
            y: 0, //下
            x2: 0, //左
            y2: 1, //上
            colorStops: [
              {
                offset: 0,
                color: "#46DCCB", // 0% 处的颜色
              },
              // {
              //     offset: 0.7,
              //     color: '#2378f7' // 70% 处的颜色
              // },
              {
                offset: 1,
                color: "#4AC9BB", // 100% 处的颜色
              },
            ],
          },
        },
      },
    ],
  };
  option && myPmChart.setOption(option);
};

const initRealChart = () => {
  let realChartDom = document.getElementById("realChart");
  echarts.dispose(realChartDom);
  myRealChart = echarts.init(realChartRef.value);
  myRealChart.clear();
  let option;
  option = {
    title: [
      {
        show: true,
        text: "PM2.5",
        subtext: realData.realChart[0].value,
        left: "14%",
        top: "15%",
        zlevel: 9,
        textStyle: {
          fontSize: 15,
          //align: 'center',
          fontWeight: 700,
          fontFamily: "微软雅黑",
          color: "#236E8A",
          lineHeight: 15,
        },
        subtextStyle: {
          //副标题文本样式{"color": "#aaa"}
          fontSize: 20,
          //align: 'center',
          fontWeight: 600,
          fontFamily: "微软雅黑",
          color: "#42CF91",
          lineHeight: 20,
        },
        textAlign: "center",
      },
      {
        show: true,
        text: "PM10",
        subtext: realData.realChart[1].value,
        left: "14%",
        top: "40%",
        zlevel: 9,
        textStyle: {
          fontSize: 15,
          //align: 'center',
          fontWeight: 700,
          fontFamily: "微软雅黑",
          color: "#236E8A",
          lineHeight: 15,
        },
        subtextStyle: {
          //副标题文本样式{"color": "#aaa"}
          fontSize: 20,
          //align: 'center',
          fontWeight: 600,
          fontFamily: "微软雅黑",
          color: "#42CF91",
          lineHeight: 20,
        },
        textAlign: "center",
      },
      {
        show: true,
        text: "噪音",
        subtext: realData.realChart[2].value,
        left: "14%",
        top: "65%",
        zlevel: 9,
        textStyle: {
          fontSize: 15,
          //align: 'center',
          fontWeight: 700,
          fontFamily: "微软雅黑",
          color: "#236E8A",
          lineHeight: 15,
        },
        subtextStyle: {
          //副标题文本样式{"color": "#aaa"}
          fontSize: 20,
          //align: 'center',
          fontWeight: 600,
          fontFamily: "微软雅黑",
          color: "#42CF91",
          lineHeight: 20,
        },
        textAlign: "center",
      },
      {
        show: true,
        text: "AQI",
        subtext: realData.realChart[3].rate,
        left: "49%",
        top: "31%",
        zlevel: 9,
        textStyle: {
          fontSize: 20,
          //align: 'center',
          //fontWeight: 700,
          fontFamily: "微软雅黑",
          color: "#236E8A",
        },
        subtextStyle: {
          //副标题文本样式{"color": "#aaa"}
          fontSize: 35,
          //align: 'center',
          //fontWeight: 600,
          fontFamily: "微软雅黑",
          color: "#52d8c9",
          lineHeight: 200,
        },
        textAlign: "center",
      },
    ],
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        name: "PM2.5",
        type: "pie",
        radius: ["15%", "18%"],
        center: ["15%", "20%"],
        avoidLabelOverlap: false,
        itemStyle: {
          color: function (params) {
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                offset: 0,
                color: "#508EFF",
              },
              {
                offset: 1,
                color: "#82AEFE",
              },
            ]);
          },
        },
        data: [
          {
            value: realData.realChart[0].value,
            label: {
              show: true,
              position: "center",
              color: "#75A5FE",
              formatter: function (params) {
                var percent = 0;
                //percent = ((params.value / total) * 100).toFixed(0);
                if (params.name !== "") {
                  return params.value;
                  // return params.value + "人" + "\n" + percent + "%";
                  // return (
                  //     params.name + '\n' +
                  //     percent +
                  //     "%"
                  // );
                } else {
                  return "";
                }
              },
              textStyle: {
                fontSize: "20",
                fontWeight: "bold",
                color: "#75A5FE",
              },
            },
          },
          {
            value: 100 - realData.realChart[0].value,
            name: "invisible",
            label: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: "#F1F1F1",
              },
              emphasis: {
                color: "#F1F1F1",
              },
            },
          },
        ],
      },
      {
        name: "PM10",
        type: "pie",
        radius: ["15%", "18%"],
        center: ["15%", "45%"],
        avoidLabelOverlap: false,
        itemStyle: {
          color: function (params) {
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                offset: 0,
                color: "#45BEB0",
              },
              {
                offset: 1,
                color: "#57E3D3",
              },
            ]);
          },
        },
        data: [
          {
            value: realData.realChart[1].value,
            label: {
              show: true,
              position: "center",
              color: "#42CF91",
              formatter: function (params) {
                var percent = 0;
                //percent = ((params.value / total) * 100).toFixed(0);
                if (params.name !== "") {
                  return params.value;
                  // return params.value + "人" + "\n" + percent + "%";
                  // return (
                  //     params.name + '\n' +
                  //     percent +
                  //     "%"
                  // );
                } else {
                  return "";
                }
              },
              textStyle: {
                fontSize: "20",
                fontWeight: "bold",
                color: "#42CF91",
              },
            },
          },
          {
            value: 100 - realData.realChart[1].value,
            name: "invisible",
            label: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: "#F1F1F1",
              },
              emphasis: {
                color: "#F1F1F1",
              },
            },
          },
        ],
      },
      {
        name: "噪音",
        type: "pie",
        radius: ["15%", "18%"],
        center: ["15%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          color: function (params) {
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                offset: 0,
                color: "#F2D85C",
              },
              {
                offset: 1,
                color: "#FCB407",
              },
            ]);
          },
        },
        data: [
          {
            value: realData.realChart[2].value,
            label: {
              show: true,
              position: "center",
              color: "#FFCF3D",
              formatter: function (params) {
                var percent = 0;
                //percent = ((params.value / total) * 100).toFixed(0);
                if (params.name !== "") {
                  return params.value;
                  // return params.value + "人" + "\n" + percent + "%";
                  // return (
                  //     params.name + '\n' +
                  //     percent +
                  //     "%"
                  // );
                } else {
                  return "";
                }
              },
              textStyle: {
                fontSize: "20",
                fontWeight: "bold",
                color: "#FFCF3D",
              },
            },
          },
          {
            value: 100 - realData.realChart[2].value,
            name: "invisible",
            label: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: "#F1F1F1",
              },
              emphasis: {
                color: "#F1F1F1",
              },
            },
          },
        ],
      },
      {
        name: "AQI",
        type: "pie",
        radius: ["32%", "38%"],
        center: ["50%", "43%"],
        avoidLabelOverlap: false,
        itemStyle: {
          color: function (params) {
            return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上

                offset: 0,
                color: "#45BEB0",
              },
              {
                offset: 1,
                color: "#57E3D3",
              },
            ]);
          },
        },
        data: [
          {
            value: realData.realChart[3].value,
            label: {
              show: true,
              position: "center",
              color: "#52D8C9",
              formatter: function (params) {
                var percent = 0;
                //percent = ((params.value / total) * 100).toFixed(0);
                if (params.name !== "") {
                  return params.value;
                  // return params.value + "人" + "\n" + percent + "%";
                  // return (
                  //     params.name + '\n' +
                  //     percent +
                  //     "%"
                  // );
                } else {
                  return "";
                }
              },
              textStyle: {
                fontSize: "20",
                fontWeight: "bold",
                color: "#52D8C9",
              },
            },
          },
          {
            value: 100 - realData.realChart[3].value,
            name: realData.realChart[3].value,
            label: {
              position: "center",
              color: "#52d8c9",
              fontSize: 70,
            },
            itemStyle: {
              normal: {
                color: "#F1F1F1",
              },
              emphasis: {
                color: "#F1F1F1",
              },
            },
          },
        ],
      },
    ],
  };
  option && myRealChart.setOption(option);
};

const nowYear = ref(new Date().getFullYear());
</script>

<template>
  <div class="environment">
    <div class="e-l">
      <div class="aqiContainer">
        <div class="title">本月</div>
        <div ref="aqiChartRef" id="aqiChart"></div>
      </div>
      <div class="ycContainer">
        <div class="title">{{ nowYear }}年</div>
        <div class="pmInfo">
          <img src="@/assets/images/environment/pm2.5.png" /><span
            >PM2.5年平均浓度:<span class="blueText">32.41</span></span
          >
          <img src="@/assets/images/environment/pm10.png" /><span
            >PM10年平均浓度:<span class="greenText">32.41</span></span
          >
        </div>
        <div class="pmInfo2">
          <img src="@/assets/images/environment/good.png" /><span
            >最优:<span class="blueText">01.20~02.20 达标7天</span></span
          >
          <img src="@/assets/images/environment/notgood.png" /><span
            >最差:<span class="greenText" style="color: #f3906f"
              >02.25~03.26 达标3天</span
            ></span
          >
        </div>
        <div ref="ycChartRef" id="ycChart"></div>
      </div>
    </div>
    <div class="e-m">
      <div class="realContainer">
        <div class="title">实时环境监测</div>
        <div class="bottomPanel"></div>
        <div class="rightPanel">
          <div
            v-for="value in realData.infoPanel"
            :key="value.name"
            class="rifhtPanelItem"
            :style="{ backgroundImage: 'url(' + value.src + ')' }"
          >
            <span>{{ value.name }}</span
            ><br />
            <span :style="{ color: value.color }">{{ value.value }}</span>
          </div>
        </div>
        <div ref="realChartRef" id="realChart"></div>
      </div>
      <div class="pmContainer">
        <div class="title">最近6个月</div>
        <div class="pmInfo">
          <img src="@/assets/images/environment/pm2.5.png" /><span
            >PM2.5年平均浓度:<span class="blueText">32.41</span></span
          >
          <img src="@/assets/images/environment/pm10.png" /><span
            >PM10年平均浓度:<span class="greenText">32.41</span></span
          >
        </div>
        <div ref="pmChartRef" id="pmChart"></div>
      </div>
    </div>
    <div class="e-r">
      <div class="eleContainer">
        <div class="title">用电量</div>
        <div ref="eleChartRef" id="eleChart"></div>
      </div>
      <div class="waterContainer">
        <div class="title">用水量</div>
        <div ref="waterChartRef" id="waterChart"></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.environment {
  width: 100%;
  height: calc(100vh - 85px);
  overflow: hidden;
  overflow-y: scroll;

  .e-l {
    width: 29%;
    //height: 100%;
    float: left;

    @media only screen and (max-width: 1885px) {
      width: 40%;
    }

    .aqiContainer {
      position: relative;
      width: 100%;
      //height: 46%;
      height: 468px;
      margin: 0 8px;
      background-color: white;
      border: 1px solid #dce3ef;
      box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
      border-radius: 6px;
    }

    .ycContainer {
      position: relative;
      width: 100%;
      //height: 52%;
      height: 510px;
      margin: 0 8px;
      margin-top: 12px;
      background-color: white;
      border: 1px solid #dce3ef;
      box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
      border-radius: 6px;

      .pmInfo {
        position: absolute;
        top: 55%;
        left: 20px;
        vertical-align: middle;

        img {
          width: 17px;
          padding-left: 30px;
          padding-right: 5px;
        }
      }

      .pmInfo2 {
        position: absolute;
        bottom: 15px;
        left: 5px;
        vertical-align: middle;

        img {
          width: 17px;
          padding-left: 20px;
          padding-right: 5px;
        }
      }
    }
  }

  .e-m {
    width: 40%;
    //height: 100%;
    margin: 0 13px;
    float: left;

    @media only screen and (max-width: 1885px) {
      width: 55%;
    }

    .realContainer {
      position: relative;
      width: 100%;
      //height: 64%;
      height: 654px;
      margin: 0 8px;
      background-color: white;
      border: 1px solid #dce3ef;
      box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
      border-radius: 6px;

      .rightPanel {
        position: absolute;
        top: 45px;
        right: 35px;

        .rifhtPanelItem {
          width: 155px;
          height: 89px;
          box-sizing: border-box;
          // text-align: center;
          padding-top: 23px;
          padding-left: 45%;
          margin-bottom: 16px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }

      .bottomPanel {
        position: absolute;
        bottom: 45px;
        width: 90%;
        height: 52px;
        left: 5%;
        margin: 0 auto;
        background-image: url("@/assets/images/environment/flag.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }

    .pmContainer {
      position: relative;
      width: 100%;
      //height: 34%;
      height: 322px;
      margin: 0 8px;
      margin-top: 12px;
      background-color: white;
      border: 1px solid #dce3ef;
      box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
      border-radius: 6px;

      .pmInfo {
        position: absolute;
        bottom: 10px;
        left: 20%;
        vertical-align: middle;

        img {
          width: 17px;
          padding-left: 30px;
          padding-right: 5px;
        }
      }
    }
  }

  .e-r {
    width: 29%;
    //height: 100%;
    float: left;

    @media only screen and (max-width: 1885px) {
      width: 97%;
      display: flex;
    }

    .eleContainer {
      position: relative;
      width: 100%;
      //height: 46%;
      height: 468px;
      margin: 0 8px;
      background-color: white;
      border: 1px solid #dce3ef;
      box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
      border-radius: 6px;

      @media only screen and (max-width: 1885px) {
        width: 50%;
        // height: 66%;
        margin-top: 12px;
      }
    }

    .waterContainer {
      position: relative;
      width: 100%;
      //height: 52%;
      height: 510px;
      margin: 0 8px;
      margin-top: 12px;
      background-color: white;
      border: 1px solid #dce3ef;
      box-shadow: 2px 2px 0px 0px rgba(236, 238, 252, 0.32);
      border-radius: 6px;

      @media only screen and (max-width: 1885px) {
        width: 50%;
        height: 468px;
        margin-left: 5px;
      }
    }
  }
}

.title {
  position: absolute;
  top: 9px;
  height: 20px;
  padding-left: 5px;
  margin-left: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #656565;
  line-height: 20px;
  border-left: 3px solid #8f93f7;
}

.blueText {
  font-size: 16px;
  font-weight: 500;
  color: #5aaaf6;
  line-height: 18px;
  padding-left: 10px;
}

.greenText {
  font-size: 16px;
  font-weight: 500;
  color: #4dcebf;
  line-height: 18px;
  padding-left: 10px;
}

#aqiChart {
  width: 100%;
  max-width: 557px;
  height: 100%;
  max-height: 468px;
}

#ycChart {
  width: 100%;
  max-width: 557px;
  height: 100%;
  max-height: 528px;
}

#eleChart {
  width: 100%;
  //max-width: 557px;
  height: 100%;
  max-height: 468px;
}

#waterChart {
  width: 100%;
  //max-width: 557px;
  height: 100%;
  max-height: 528px;
}

#realChart {
  width: 100%;
  //max-width: 738px;
  height: 100%;
  max-height: 654px;
}

#pmChart {
  width: 100%;
  //max-width: 738px;
  height: 100%;
  max-height: 340px;
}
</style>